<mat-form-field class="omv-flex-1"
                [formGroup]="formGroup">
  <div *ngIf="config.icon"
       matPrefix>
    <mat-icon [svgIcon]="config.icon"></mat-icon>&nbsp;
  </div>
  <mat-label>{{ config.label | transloco | template:pageContext }}</mat-label>
  <input matInput
         type="text"
         class="omv-text-truncate"
         [ngClass]="{'omv-text-monospace': config.monospace}"
         [formControlName]="config.name"
         [placeholder]="config.placeholder | transloco"
         [readonly]="config.readonly"
         [autofocus]="config.autofocus"
         [autocapitalize]="config.autocapitalize"
         [autocomplete]="config.autocomplete"
         [required]="config.validators?.required"
         [minlength]="config.validators?.minLength"
         [maxlength]="config.validators?.maxLength"
         [matAutocomplete]="autocomplete"
         [matAutocompleteDisabled]="!config.suggestions">
  <mat-autocomplete #autocomplete="matAutocomplete"
                    autoActiveFirstOption>
    <ng-container *ngIf="!loading; else renderLoading">
      <mat-option *ngFor="let option of filteredOptions$ | async"
                  [value]="option[config.valueField]">
        {{ option[config.textField] | transloco }}
      </mat-option>
    </ng-container>
    <ng-template #renderLoading>
      <mat-option disabled>
        <div class="omv-display-flex omv-flex-row omv-align-items-center omv-align-content-center omv-justify-content-between">
          <span>{{ 'Loading ...' | transloco }}</span>
          <mat-icon *ngIf="loading"
                    class="omv-icon-rotate-360-infinite"
                    svgIcon="mdi:loading">
          </mat-icon>
        </div>
      </mat-option>
    </ng-template>
  </mat-autocomplete>
  <mat-icon *ngIf="config.hasCopyToClipboardButton"
            matSuffix
            matTooltip="{{ 'Copy to clipboard' | transloco }}"
            (click)="onCopyToClipboard()"
            svgIcon="{{ icon.copy }}">
  </mat-icon>
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)">
      {{ 'This field is required.' | transloco }}
    </span>
    <span *ngIf="formGroup.hasError('minlength', config.name)"
          transloco="The value must be at least {{ config.validators.minLength }} characters long.">
    </span>
    <span *ngIf="formGroup.hasError('maxlength', config.name)"
          transloco="The value cannot exceed {{ config.validators.maxLength }} characters.">
    </span>
    <span *ngIf="formGroup.hasError('constraint', config.name)">
      {{ formGroup.getError('constraint', config.name) | transloco }}
    </span>
    <span *ngIf="formGroup.hasError('pattern', config.name)">
      {{ formGroup.getError('pattern', config.name) | transloco }}
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0"
            [innerHTML]="config.hint | transloco | template:pageContext | sanitizeHtml">
  </mat-hint>
</mat-form-field>
